<template>
  <div class="container">
    <div class="app-container">
      <el-row class="myRow">
        <el-col :span="24">
          <el-card>
            <el-button type="danger" @click="$router.push('/salary/setting')">设置</el-button>
            <el-button type="primary" @click="$router.push(`/salary/report/${String(companySettings.dataMonth).replace('-','')}`)">{{ String(companySettings.dataMonth).replace('-','') }}报表</el-button>
          </el-card>
        </el-col>
      </el-row>
      <el-row class="myRow">
        <el-card>
          <el-row>
            <el-col :span="24" :offset="1">
              <el-form label-position="right" label-width="80px">
                <el-form-item label="聘用形式:">
                  <el-checkbox-group v-model="queryParams.approvalsTypeChecks">
                    <el-checkbox :label="1" name="type2" @change="changeDep">正式</el-checkbox>
                    <el-checkbox :label="2" name="type2" @change="changeDep">非正式</el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
                <el-form-item label="部门:">
                  <el-checkbox-group v-model="queryParams.departmentChecks">
                    <el-checkbox v-for="item in departmentList" :key="item.id" :label="item.id" name="type" @change="changeDep">
                      {{ item.name }}
                    </el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </el-card>
      </el-row>
      <el-row class="myRow">
        <el-col :span="24">
          <el-card>
            <el-table
              :data="tableData"
              border
              style="width: 100%"
            >
              <el-table-column
                type="index"
                label="序号"
                width="80"
              />

              <el-table-column
                prop="username"
                label="姓名"
                width="180"
              />
              <el-table-column
                prop="mobile"
                label="手机"
                width="180"
              />
              <el-table-column
                prop="workNumber"
                label="工号"
                width="180"
              />
              <el-table-column
                prop="inServiceStatus"
                label="聘用形式"
                width="180"
              >
                <template slot-scope="scope">
                  {{ inServiceList[scope.row.inServiceStatus] }}
                </template>
              </el-table-column>
              <el-table-column
                prop="departmentName"
                label="部门"
                width="180"
              />
              <el-table-column
                prop="timeOfEntry"
                label="入职时间"
                width="180"
              />
              <el-table-column
                prop="currentBasicSalary"
                label="工资基数"
                width="180"
              />
              <el-table-column
                prop="subsidyName"
                label="津贴方案"
                width="180"
              />

              <el-table-column
                label="操作"
                width="180"
              >
                <template slot-scope="scope">
                  <el-button v-if="scope.row.currentBasicSalary <= 0" size="mini" type="primary" @click="openDialog(scope.row,1)">定薪</el-button>
                  <el-button v-if="scope.row.currentBasicSalary >0" size="mini" type="danger" @click="openDialog(scope.row,2)">调薪</el-button>
                  <el-button size="mini" @click="toDetail(scope.row)">查看</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              :current-page.sync="queryParams.page"
              :page-size="queryParams.pageSize"
              layout="total, prev, pager, next"
              :total="total"
              @current-change="handleCurrentChange"
            />
          </el-card>
        </el-col>
      </el-row>
    </div>
    <el-dialog :visible.sync="showDialog" title="定薪" width="700px">
      <Dingxin v-if="showDialog && showDialogType === 1" :userid="selUserId" @closeDialog="showDialog=$event" />
      <Tiaoxin v-if="showDialog && showDialogType === 2" :userid="selUserId" @closeDialog="showDialog=$event" />
    </el-dialog>
  </div>
</template>
<script>
import { getDepartment } from '@/api/department'
import { getSalaryList, getSalaryCompanySettings } from '@/api/salarys'
import Dingxin from './components/dingxin'
import Tiaoxin from './components/tiaoxin'
export default {
  name: 'Salary',
  components: {
    Dingxin,
    Tiaoxin },
  data() {
    return {
      queryParams: {
        page: 1,
        pageSize: 10,
        approvalsTypeChecks: [],
        departmentChecks: []
      },
      form: {
        type: []
      },
      departmentList: [],
      tableData: [],
      total: 0,
      inServiceList: ['非正式', '正式'],
      companySettings: {},
      showDialog: false,
      selUserId: '',
      showDialogType: ''
    }
  },
  created() {
    this.getDepartment()
    this.loadData()
    this.getSalaryCompanySettings()
  },
  methods: {
    toDetail(row) {
      console.log('toDetail', row)
      this.$router.push({
        path: `/salary/detail/${row.id}/${String(this.companySettings.dataMonth).replace('-', '')}`
      })
    },
    openDialog(row, type) {
      console.log('openDialog', row)
      this.showDialog = true
      this.selUserId = row.id
      this.showDialogType = type
    },
    handleCurrentChange(val) {
      this.queryParams.page = val
      this.loadData()
    },
    async getDepartment() {
      const res = await getDepartment()
      console.log('getDepartment', res)
      this.departmentList = res
    },
    changeDep() {
      console.log('changeDep', this.queryParams)
      this.loadData()
    },
    async loadData() {
      console.log('loadData', this.queryParams)
      this.queryParams
      const res = await getSalaryList({ page: this.queryParams.page,
        pageSize: this.queryParams.pageSize,
        approvalsTypeChecks: this.queryParams.approvalsTypeChecks.join(),
        departmentChecks: this.queryParams.departmentChecks.join() })
      this.tableData = res.rows
      this.total = res.total
      console.log('getSalaryList', res)
    },
    async getSalaryCompanySettings() {
      const res = await getSalaryCompanySettings()
      console.log('getSalaryCompanySettings', res)
      this.companySettings = res
    }
  }
}
</script>

<style lang="scss" scoped>
  .myRow {
    margin-bottom: 20px;
  }
</style>

